<template>
  <div class="home">
    <img src="@/assets/images/logo.png" class="bg_logo" />
    <container :title="name" :desc="desc">
      <template v-for="(item, index) in list">
        <!-- result 目前仅表格组件使用 -->
        <component
          :is="item.componentName"
          :key="index"
          :question="item"
          :index="index"
          :total="list.length"
          :error="item.error"
          :result="result"
          @complete="complete"
          @show-message="showMessage"
        />
      </template>
      <a-button type="primary" class="btn" @click="submit">
        提交
      </a-button>
    </container>
  </div>
</template>

<script>
// @ is an alias to /src
import { getQuestions, submit } from '@/services/homeService'
import Container from '@/components/container.vue'
import { toFirstUpperCase } from '@/utils/utils'
import { message } from 'ant-design-vue'

export default {
  name: 'Home',
  components: {
    Container,
  },
  data() {
    return {
      name: 'xx调查问卷',
      desc: '问卷描述<span style="color:red;">内容</span>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦',
      result: [],
      // list: questionConfig
      list: [],
    }
  },
  async created() {
    this.list = await getQuestions()
    // 动态引入自定义表单组件
    // 参考：https://blog.csdn.net/weixin_42406046/article/details/103718293
    this.list.forEach((item) => {
      item.error = ''
      if (!item.componentName) return false
      const fileName = toFirstUpperCase(item.componentName)
      this.$options.components[item.componentName] = resolve => require([`./components/${fileName}.vue`], resolve)
    })
    this.result = new Array(this.list.length)
  },
  methods: {
    complete(answer, index) {
      // console.log(answer, index)
      // 清除提示错误框
      const item = this.list[index]
      item.error = ''
      this.list.splice(index, 1, item)

      // 更新答案
      this.result.splice(index, 1, answer)
    },
    showMessage(msg) {
      message.error(msg)
    },
    // 跳转锚点
    // 参考：https://segmentfault.com/q/1010000007888351
    scroll(index) {
      const question = this.list[index]
      document.querySelector(`#${question.outId}`).scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
    },
    async submit() {
      // 定位到未填项，且错误提示所有未填项
      let errorIndex = -1
      for (let i = 0; i < this.list.length; i++) {
        const answer = this.result[i]
        const question = this.list[i]
        if (errorIndex < 0 && !answer && question.requiredFlag) {
          errorIndex = i
        }
        if (!answer && question.requiredFlag) {
          this.list[i].error = 'error'
          continue
        }
      }
      if (errorIndex > -1) {
        this.$forceUpdate()
        return this.scroll(errorIndex)
      }

      // 保存提交
      const data = {
        answerContent: JSON.stringify(this.result),
        answerDesc: '',
        appId: '',
        companyId: 0,
        ext: '',
        openId: '',
        source: 'PC',
        surveyId: this.list[0].surveyId
      }
      // console.log(JSON.stringify(data, undefined, 2))
      await submit(data)
    }
  },

}
</script>
<style lang="less" scoped>
.home{
  width: 75%;
  text-align: left;
  margin:  auto;
  .bg_logo{
    width: 123px;
    height: auto;
    margin: 49px 0 34px 0;
  }
  .btn{
    height: 45px;
    margin-bottom: 40px;
  }
}

</style>
